import React from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import { Card, Space, Form, Radio, Upload, Input, Button, Alert, Result } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import style from '../assets/less/certificationLess.less'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 8 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

class CertificationPage extends React.Component {
    constructor(props) {
        super(props),
            this.state = {
                appQRCodeIsUpload: false,
                certificationMaterialsIsUpload: false
            }
    }

    appQRCodeBeforeUpload = (file, fileList) => {
        return this.state.appQRCodeIsUpload
    }

    certificationMaterialsBeforeUpload = (file, fileList) => {
        return false
    }

    onFinish = values => {
        let formData = new FormData()
        formData.append('mechanismName', values.mechanismName)
        formData.append('mechanismType', values.mechanismType)
        formData.append('phone', values.phone)
        formData.append('email', values.email)
        formData.append('userId',this.props.user.id)
        if(values.appQRCode !== undefined){
            formData.append('appQRCode', values.appQRCode.file)
        }
        formData.append('address', values.address)
        formData.append('certificationMaterials', values.certificationMaterials.file)
        this.props.dispatch({
            type: "mechanismOperation/uploadMechanismInformation",
            data: formData
        })
    };

    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    }

    renderCertificationPage = userType => {
        if(userType != 4){
            return(
                <Result
                    status="warning"
                    title="请先登录机构账号后再提交机构信息！"
                >
                </Result>
            )
        }else{
            return(
                <div id={style.mechanismCertificationForm}>
                    <Form
                        {...layout}
                        name="mechanismCertification"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="机构名称"
                            name="mechanismName"
                            rules={[{ required: true, message: '请输入机构名称!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="机构类型"
                            name="mechanismType"
                            rules={[{ required: true, message: '请选择机构类型!' }]}
                        >
                            <Radio.Group>
                                <Radio value={1}>验证机构</Radio>
                                <Radio value={2}>测试机构</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item
                            label="联系方式"
                            name="phone"
                            rules={[{ required: true, message: '请输入联系方式!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{ required: true, message: '请输入邮箱!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="地址"
                            name="address"
                            rules={[{ required: true, message: '请输入地址!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="二维码"
                            name="appQRCode"
                        >
                            <Upload
                                accept={'.jpg,.jpeg,.png'}
                                beforeUpload={this.appQRCodeBeforeUpload}
                                listType="picture-card"
                                maxCount="1"
                            >
                                <Button icon={<UploadOutlined />}>选择图片</Button>
                            </Upload>
                        </Form.Item>

                        <Form.Item
                            label="认证文件"
                            name="certificationMaterials"
                            rules={[{ required: true, message: '请选择认证文件!' }]}
                        >
                            <Upload
                                maxCount="1"
                                beforeUpload={this.certificationMaterialsBeforeUpload}
                            >
                                <Button icon={<UploadOutlined />}>选择文件</Button>
                            </Upload>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                提交
                         </Button>
                        </Form.Item>
                    </Form>
                </div>
            )
        }
    }

    render() {
        return(
            <BasePage>
                <CurrentLocation breadArr={breadArr.CertificationPage}></CurrentLocation>
                {this.renderCertificationPage(this.props.user.userType)}
            </BasePage>
        )
    }
}

const mapStateToProps = state => {
    let serverRes = state.app.serverRes
    let user = state.app.user
    return{
        serverRes,
        user
    }
}

export default connect(mapStateToProps)(CertificationPage)